<template>
	<view class="container">
		<view class="header">
			<text class="title">闹钟列表</text>
			<view class="add-btn" @click="navigateToAdd">
				<text class="add-icon">+</text>
			</view>
		</view>
		
		<view class="empty-tip" v-if="alarmList.length === 0">
			<text>暂无闹钟，请添加</text>
		</view>
		
		<view class="alarm-list">
			<view class="alarm-item" v-for="(item, index) in alarmList" :key="index">
				<view class="alarm-info">
					<view class="alarm-time">{{formatTime(item.hour, item.minutes)}}</view>
					<view class="alarm-name">{{item.name}}</view>
					<view class="alarm-repeat">
						<text v-if="!item.customCycle">{{formatWeekday(item.weekday)}}</text>
						<text v-else class="custom-cycle-tag">自定义周期: 当前第{{item.currentCycleIndex + 1}}周</text>
					</view>
					<view class="alarm-cycle" v-if="item.customCycle">
						<text class="cycle-info">第一周: {{formatWeekday(item.cycles[0])}}</text>
						<text class="cycle-info">第二周: {{formatWeekday(item.cycles[1])}}</text>
						<text class="cycle-note">注意: 系统闹钟不支持自定义周期，应用将自动管理周期切换</text>
					</view>
				</view>
				<view class="alarm-actions">
					<switch :checked="item.enabled" @change="toggleAlarm(index)" color="#007AFF" />
					<view class="edit-btn" @click="editAlarm(index)">
						<text class="edit-icon">✎</text>
					</view>
					<view class="delete-btn" @click="deleteAlarm(index)">
						<text class="delete-icon">×</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { alarmAdd, alarmDelete } from "@/uni_modules/laoqianjunzi-alarm";
import { loadAlarmList, saveAlarmList, formatTime, formatWeekday } from "@/utils/alarm-utils";
	
	export default {
		data() {
			return {
				alarmList: []
			};
		},
		onLoad() {
			// 从本地存储加载闹钟列表
			this.loadAlarmList();
		},
		onShow() {
			// 每次页面显示时重新加载闹钟列表
			this.loadAlarmList();
		},
		methods: {
			// 加载闹钟列表
			loadAlarmList() {
				try {
					const alarmList = loadAlarmList();
					this.alarmList = alarmList;
				} catch (e) {
					console.error('加载闹钟列表失败', e);
					uni.showToast({
						title: '加载闹钟列表失败',
						icon: 'none'
					});
				}
			},
			
			// 保存闹钟列表到本地存储
			saveAlarmList() {
				saveAlarmList(this.alarmList);
			},
			
			// 格式化时间显示
			formatTime(hour, minutes) {
				return formatTime(hour, minutes);
			},
			
			// 格式化周期显示
			formatWeekday(weekday) {
				return formatWeekday(weekday);
			},
			
			// 跳转到添加闹钟页面
			navigateToAdd() {
				uni.navigateTo({
					url: '/pages/alarm-add/alarm-add'
				});
			},
			
			// 编辑闹钟
			editAlarm(index) {
				uni.navigateTo({
					url: `/pages/alarm-add/alarm-add?index=${index}`
				});
			},
			
			// 切换闹钟启用状态
			toggleAlarm(index) {
				this.alarmList[index].enabled = !this.alarmList[index].enabled;
				this.saveAlarmList();
				
				// 如果启用闹钟，则调用系统闹钟API
				if (this.alarmList[index].enabled) {
					this.setSystemAlarm(this.alarmList[index]);
				} else {
					// 如果禁用闹钟，可以考虑删除系统闹钟
					// 目前SDK不支持按ID删除，只能通过名称删除
					uni.showToast({
						title: '闹钟已' + (this.alarmList[index].enabled ? '启用' : '禁用'),
						icon: 'none'
					});
				}
			},
			
			// 删除闹钟
			deleteAlarm(index) {
				uni.showModal({
					title: '提示',
					content: '确定要删除此闹钟吗？',
					success: (res) => {
						if (res.confirm) {
							// 删除系统闹钟
							// 注意：当前SDK只支持通过名称删除，这里我们假设名称是唯一的
							const alarmToDelete = this.alarmList[index];
							
							// 从列表中删除
							this.alarmList.splice(index, 1);
							this.saveAlarmList();
							
							uni.showToast({
								title: '闹钟已删除',
								icon: 'success'
							});
						}
					}
				});
			},
			
			// 设置系统闹钟
			setSystemAlarm(alarm) {
				const params = {
					name: alarm.name,
					weekday: alarm.weekday,
					hour: alarm.hour,
					minutes: alarm.minutes,
					ringtone: alarm.ringtone || 'https://jubaomusics.oss-cn-beijing.aliyuncs.com/%E4%B8%89%E5%8F%AA%E5%B0%8F%E7%8C%AA/%E4%B8%89%E5%8F%AA%E5%B0%8F%E7%8C%AA.mp3'
				};
				
				alarmAdd({
					params: params,
					success: (res) => {
						console.log('success', res);
						uni.showToast({
							title: '闹钟已设置',
							icon: 'success'
						});
					},
					fail: (res) => {
						console.log('fail', res);
						if(res.code === -1 && res.data === "权限") {
							// 提示用户授予权限
							uni.showModal({
								title: '提示',
								content: '需要闹钟权限才能使用此功能，请在系统设置中授予权限',
								confirmText: '去设置',
								success: function (res) {
									if (res.confirm) {
										// 打开应用设置页面
										if(uni.getSystemInfoSync().platform === 'android') {
											plus.runtime.openURL('package:' + plus.runtime.appid);
										}
									}
								}
							});
						}
					},
					complete: () => {
						console.log('complete');
					},
				});
			}
		}
	};
</script>

<style>
	.container {
		padding: 20rpx;
	}
	
	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 0;
		margin-bottom: 30rpx;
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
	}
	
	.add-btn {
		width: 80rpx;
		height: 80rpx;
		background-color: #007AFF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.add-icon {
		color: #FFFFFF;
		font-size: 50rpx;
		font-weight: bold;
	}
	
	.empty-tip {
		text-align: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 30rpx;
	}
	
	.alarm-list {
		margin-top: 20rpx;
	}
	
	.alarm-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		margin-bottom: 20rpx;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}
	
	.alarm-info {
		flex: 1;
	}
	
	.alarm-time {
		font-size: 40rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
	}
	
	.alarm-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
	}
	
	.alarm-repeat {
		font-size: 24rpx;
		color: #666;
	}
	
	.custom-cycle-tag {
		color: #007AFF;
		font-weight: bold;
	}
	
	.alarm-cycle {
		margin-top: 10rpx;
	}
	
	.cycle-info {
		display: block;
		font-size: 22rpx;
		color: #999;
		margin-top: 5rpx;
	}
	
	.cycle-note {
		display: block;
		font-size: 20rpx;
		color: #FF3B30;
		margin-top: 10rpx;
	}
	
	.alarm-actions {
		display: flex;
		align-items: center;
	}
	
	.edit-btn {
		margin-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: #007AFF;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.edit-icon {
		color: #FFFFFF;
		font-size: 30rpx;
		font-weight: bold;
	}
	
	.delete-btn {
		margin-left: 20rpx;
		width: 60rpx;
		height: 60rpx;
		background-color: #FF3B30;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.delete-icon {
		color: #FFFFFF;
		font-size: 40rpx;
		font-weight: bold;
	}
</style>